<cfcomponent output="false">
	
	<!--- --->
	
	<cffunction name="renderUserList" access="public" output="false" returntype="string">

		<cfset var local = {} />
		
		<cfset local.users = application.s.pongService.listPlayers(userID=session.userID) />
		<cfset local.rules = application.s.pongService.getRules() />
		
		<cfset local.loggedIn = false />
		<cfif session.user.recordcount gt 0>
			<cfset local.loggedIn = true />
		</cfif>
		
		<cfsavecontent variable="local.result">
			<cfoutput>
				</br></br></br></br></br></br>
				<div id="pong-div" style="font-size:12px;">
				<table id="pongUserTable" style="font-size:12px;display:inline;width:350px !important;top:100px;text-align:left;vertical-align:top;">
					<tr>
						<th width="50px;" style="text-align:right;">Avg&nbsp;</th>
						<th width="65px;">Rating</th>
						<th>Player</th>
						
					</tr>
					<cfloop query="local.users">
						<tr>
							<td style="text-align:right;">#decimalFormat(local.users.rating)#&nbsp;</td>
							<td><input style="padding:0px;margin:0px;"name="rating_#local.users.id#" size="1" value="#local.users.my_rating#" validate="positive,integer,maximum100" <cfif not local.loggedIn>disabled</cfif>></td>
							<td>#local.users.first_name# #local.users.last_name# <!--- email:#local.users.email# pw:#local.users.password# ---></td>
						</tr>
	 				</cfloop>
	 				<tr>
						<td colspan="15">
							<cfif local.loggedIn>
								<button onclick="javascript:Pong.saveRatings();">save ratings</button>
							</cfif>
						</td>		 				
					</tr>
				</table>
				
				<table id="rulesTable" style="display:inline;width:600px;font-size:12px;">
					<cfset local.last_rule = 0  />
					<cfloop query="local.rules">
						<cfif local.last_rule neq local.rules.pong_rule_id>
							<cfset local.last_rule = local.rules.pong_rule_id />
							<cfif local.rules.currentRow neq 1>
								</ul>
								</td>
								</tr>
							</cfif>
							<tr>
								<td><b>#local.rules.pong_rule#</b>
								<ul style="margin-top:0px;margin-bottom:10px;">
						</cfif>
						<li><input type="radio" name="rule_#local.rules.pong_rule_id#" value="#local.rules.pong_rule_option_id#" <cfif local.rules.vote eq local.rules.pong_rule_option_id>checked</cfif> <cfif not local.loggedIn>disabled</cfif>>#local.rules.pong_rule_option#
						<div style="background-color:rgb(31, 156, 0);opacity:.5;margin-top:-14px;margin-left:20px;width:#local.rules.counts*10#px;">&nbsp;</div>
					</cfloop>
					</ul>
					</td>
					</tr>
					<cfif local.loggedIn>
						<tr>
							<td colsapn="15">
								<button onclick="javascript:Pong.saveRatings();">save votes</button>
							</td>
						</tr>
					</cfif>
				</table>
				</div>
			</cfoutput>
		</cfsavecontent>
		
		<cfreturn local.result />
		
	</cffunction>
	
	<!--- --->
	
	<cffunction name="renderTopbar" access="public" output="false" returntype="string">

		<cfset var local = {} />
		
		<cfsavecontent variable="local.result">
			<cfoutput>
				<div id="top_bar" style="margin-top:0px;height:100px;">
					<table id="top_bar_table">
						<td width="48%">		
							<table>
								<tr>
									<td id="top_bar-left">							
										
									</td>
								</tr>
								<tr>
									<td id="top_bar-leftBottom">
										<div class="top_bar-bottomNav" style="font-weight:normal;font-size:13px;">
											1. Register for play. </br>
											2. Rate players from 100 (best) to 1 (worst) </br>
											3. Vote on tournament rules. </br>
											4. Wait for the games to start.
										</div>
									</td>
								</tr>
							</table>
						</td>
						<td width="48%" id="top_bar-middle" class="clickable" onclick="window.location ='#application.q.getVar("homeURL")#?init';">
							#application.q.img('wpzoom/pong.png','fundr-icon')#
						</td>
						<td>
							#application.v.pongView.renderLogin()#
						</td>
					</table>
				</div>
			</cfoutput>
		</cfsavecontent>
		
		<cfreturn local.result />
		
	</cffunction>
	
	<!--- --->
	
	<cffunction name="renderLogin" access="public" output="false" returntype="string">

		<cfset var local = {} />
		
		<cfset local.divToShow = "loggedOut" />
		
		<cfset local.user = application.s.loginService.beginSession() />
		<cfif local.user.recordcount eq 1>
			<cfset local.divToShow = "loggedIn" />
		</cfif>
		
		<cfsavecontent variable="local.result">
			<cfoutput>
				<table>
					<tr>
						<td id="top_bar-right">
							<div id="login-loggedOut" class="loginDiv <cfif local.divToShow eq 'loggedOut'><cfelse>hidden</cfif>">
								<button type="button" onclick="javascript:Login.showCreateForm();">Create Account</button>
								<button type="button" onclick="javascript:Login.showLoginForm();">Login</button>
								<form action="#application.q.form('loginController','facebookLogin')#" method="post" style="margin:0px;">
									<button type="submit">Facebook Login</button>
								</form>
							</div>
							<div id="login-logIn" class="hidden loginDiv">
								<input name="email" value="" placeholder="email" size="14" validate="required,email" /><input name="password" type="password" placeholder="password" size="8" validate="required" onkeyup="javascript:Login.logInByEnter(event);" />
								<button type="button" onclick="javascript:Login.logIn();">Login</button></br>
								<button class="small" type="button" onclick="javascript:Login.showCreateForm();">Create Account</button>
								<form action="#application.q.form('loginController','facebookLogin')#" method="post" style="display:inline;">
									<button class="small"type="submit">Facebook Login</button>
								</form>
							</div>
							<div id="login-loggedIn" class="loginDiv" style="color:orange;font-weight:bold;font-size:15px;color:white;">
								 Double Elimination Pong Tournament</br>
								 - Singles
							</div>
							<div id="login-newUser" class="hidden loginDiv">
								<input name="email" value="" placeholder="email" size="14" validate="required,email,match1" />
								<input name="email2" value="" placeholder="confirm email" size="14" validate="required,email,match1" />
								<input name="password" type="password" value="" placeholder="password" size="8" validate="required,match2" />
								<input name="password2" type="password" value="" placeholder="confirm password" size="8" validate="required,match2" />
								</br>
								<input name="first_name" value="" placeholder="first name" size="8" validate="required" />
								<input name="last_name" value="" placeholder="last name" size="8" validate="required" onkeyup="javascript:Login.loginKeyUp(this,event);" />
							</div>
						</td>
					</tr>
					<tr>
						<td id="top_bar-rightBottom">
							<div id="login-loggedInBottom" class="top_bar-bottomNav <cfif local.divToShow neq "loggedIn">hidden</cfif>" style="font-weight:normal;">
								Logged in as: <span id="userFullName">#session.user.first_name# #session.user.last_name#</span>&nbsp;&nbsp;&nbsp;<button class="small" onclick="javascript:Login.logOut();">Log Out</button>
							</div>
							<div id="login-newUserBottom" class="hidden top_bar-bottomNav loginDiv">
								<button class="small" onclick="javascript:Login.showLoginForm();">Login</button>
								<button class="small" onclick="javascript:Login.createUser();">Create Account</button>
							</div>
						</td>
					</tr>
				</table>
			</cfoutput>
		</cfsavecontent>
		
		<cfreturn local.result />
		
	</cffunction>
	
	<!--- --->

</cfcomponent>